import { Box, Heading, HStack, Image, Text } from "@chakra-ui/react"
import { MdMovie } from 'react-icons/md'
import axios from 'axios'
import { baseURL } from '../axios.config';

export default function Movie({data, title}) {
  return (
    <Box maxW={1200} mx='auto' mt='10px'>
      <HStack fontSize='24px'>
        <MdMovie />
        <Heading as='h3' size='24px'>{title}</Heading>
      </HStack>
      <HStack mt='10px' spacing='10px'>
        {
          data.map(movie =>(
            <Box w='290px' key={movie.id}>
            <Image src={movie.url}/>
            <Text mt='10px'>{movie.title}</Text>
          </Box>
          ))
        }
       
      </HStack>
    </Box>
  )
}
export function loadMovie() {
  return axios.get('/api/movie', { baseURL })
}
